<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>数据源管理</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <script src="/style/public/publicStyle.js"></script>
    <script>
        /*layui.use(['form'], function() {
            var form = layui.form,
                $ = layui.jquery;
            $(function() {
                if(pageloadauthority("/views/jobgroup.html")==true){
                    $("body").attr("style","display:block;");
                    return;
                }
                atuLoginToken();
            })
        });*/
    </script>
    <style type="text/css">
        .layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] {
            /* width: 100%; */
            padding-left: 28px;
        }

        .layui-table-tool-panel li {
            line-height: 30px;
            -webkit-transition: .5s all;
            transition: .5s all;
            padding-left: 10px;
            padding-right: 47px;
        }
    </style>
</head>

<body>

<!--表格-->
<div class="weadmin-body">
    <div class="layui-row">
        <table class="layui-hide" id="tableDataList" lay-filter="usertab"></table>
    </div>
</div>

<!--表格操作-->
<script type="text/html" id="op">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="getCheckData">新增</button>
    </div>
</script>

<div class="layui-row" id="tableForm" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" id="formId" style="margin-top:20px" lay-filter="tableForm">
            <input type="hidden" id="formIdDb" name="idDb"/>
            <div class="layui-form-item">
                <label class="layui-form-label">启停</label>
                <div class="layui-input-block">
                    <input type="radio" name="fgStop" value="1" title="停用" checked>
                    <input type="radio" name="fgStop" value="0" title="启用">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数据库类型</label>
                <div class="layui-input-block">
                    <select name="euTp" lay-filter="euTp" lay-verify="required">
                        <option value="mysql">mysql</option>
                        <option value="oracle" selected="">oracle</option>
                        <option value="sqlserver" selected="">sqlserver</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">使用类型</label>
                <div class="layui-input-block">
                    <select name="euDbTp" lay-filter="euDbTp" lay-verify="required">
                        <option value="2" selected="">数据仓库</option>
                        <option value="1" selected="">业务库</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="na" required lay-verify="required" autocomplete="off" lay-verify="required"
                           placeholder="请输入数据库名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="display:none;">
                <label class="layui-form-label ">驱动类</label>
                <div class="layui-input-block">
                    <input type="text" name="driver" autocomplete="off"
                           placeholder="请输入驱动类" class="layui-input layui-disabled">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">url</label>
                <div class="layui-input-block">
                    <input type="text" name="url" required lay-verify="required" autocomplete="off"
                           lay-verify="required"
                           placeholder="请输入数据库连接URL" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">schema</label>
                <div class="layui-input-block">
                    <input type="text" name="tbSchema" required lay-verify="required" autocomplete="off"
                           lay-verify="required"
                           placeholder="请输入schema" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="usename" required lay-verify="required" autocomplete="off"
                           lay-verify="required"
                           placeholder="请输入用户名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input name="psword" required lay-verify="required" autocomplete="off" lay-verify="required"
                           placeholder="请输入密码"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字符集</label>
                <div class="layui-input-block">
                    <select name="characterSet" lay-filter="characterSet" lay-verify="required">
                        <option value="GBK" selected="">GBK</option>
                        <option value="UTF-8" selected="">UTF-8</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="bn layui-btn layui-btn-normal layui-btn-submit " lay-submit="" lay-filter="demo11">保存</button>
                    <button type="reset" class="bn layui-btn layui-btn-primary">重置</button>
                    <button type="button" id="testDb" class="bn layui-btn layui-btn-normal">测试</button>
                </div>
            </div>
        </form>
    </div>
</div>

</body>
<script>
    layui.use(['util', 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
        var util = layui.util;
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , form = layui.form;
        var logintoken = null;
        getSharreTieba_LoginToken();
        table.render({
            elem: '#tableDataList'
            , even: true //开启隔行背景
            , cellMinWidth: 80
            , toolbar: '#toolbarDemo'
            , url: global_visit_url_prefix + '/etl/baseDb/find'
            , where: {
                LoginKey: logintoken,
            }
            , cols: [[
                , {field: 'idDb', title: '编码', hide: true}
                , {field: 'na', title: '名称', width: 140}
                , {field: 'euTp', title: '类型', width: 80}
                , {field: 'euDbTp', title: '使用类型', width: 140}
                , {field: 'characterSet', title: '字符集', width: 80}
                , {field: 'url', title: 'URL'}
                , {field: 'driver', title: '驱动类', hide: true}
                , {field: 'tbSchema', title: 'schema'}
                , {field: 'usename', title: '用户名'}
                , {field: 'status', title: '当前状态'}
                , {field: 'fgStop', title: '启停'}
                , {field: 'psword', title: '密码', hide: true}
                , {fixed: 'right', title: '操作', align: 'center', toolbar: '#op'}
            ]]
            , done: function (res, curr, count) {  //res 接口返回的信息
                $("[data-field = 'euDbTp']").children().each(function () {
                    if ($(this).text() == '1') {
                        $(this).text("业务库");
                    } else if ($(this).text() == '2') {
                        $(this).text("数据仓库");
                    }
                });
                $("[data-field = 'fgStop']").children().each(function () {
                    if ($(this).text() == '1') {
                        $(this).text("停用");
                    } else if ($(this).text() == '0') {
                        $(this).text("启用");
                    }
                })
            }
            , page: false
        });

//监听行工具事件
        table.on('tool(usertab)', function (obj) { //注：tool 是工具条事件名，usertab 是 table 原始容器的属性 lay-filter="对应的值"

            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            debugger;
            if (layEvent == 'edit') {
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "编辑数据源",
                    area: ['520px', '630px'],
                    content: $("#tableForm")//引用的弹出层的页面层的方式加载修改界面表单
                });
                //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
                setFormValue(obj, data);
            } else if (layEvent == 'delete') {
                layer.confirm('确定数据源要删除数据源' + data.na + '吗？', {
                    btn: ['确定', '取消'], //按钮
                }, function () {
                    layer.closeAll('dialog');
                    $.ajax({
                        type: "get",
                        url: "/etl/baseDb/delete",
                        async: true,
                        data: {'idDb': data.idDb},
                        success: function (json) {
                            table.reload("tableDataList");
                        },
                        error: function (msg) {
                            layer.alert("删除失败，请重试！");
                        }
                    });
                });
            }
        });

//监听修改操作
        /*table.on('edit(usertab)', function(obj){

            var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段
            console.log(data);

            $.ajax({
                type:"POST",
                url:"/etl/baseDb/update",
                async:true,
                data:{'user':JSON.stringify(data)},
                success:function(json){

                }
            });
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
        });*/

//监听表头
        table.on('toolbar(usertab)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    $("#formIdDb").val("");
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "新增数据源",
                        area: ['520px', '630px'],
                        content: $("#tableForm")//引用的弹出层的页面层的方式加载修改界面表单
                    });
                    setFormValue(obj, null);
                    break;
            }
            ;
        });
        //监听弹出框表单提交，massage是修改界面的表单数据'submit(demo11),是修改按钮的绑定
        function setFormValue(obj, data) {
            if (data == null) {
                $("#formId")[0].reset();
            } else {
                form.val("tableForm", data);
            }
            form.on('submit(demo11)', function (massage) {
                $.ajax({
                    url: '/etl/baseDb/save',
                    type: 'post',
                    dataType: 'json',
                    async: false,
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(massage.field),
                    success: function (msg) {
                        if (msg.code == 1) {
                            alert(msg.msg);
                        } else {
                            table.reload("tableDataList");
                        }
                    },
                    error: function (msg) {
                        layer.alert("保存失败，请重试！");
                    }
                })
            })
        }

        //表单取值
        layui.$('#testDb').on('click', function () {
            layui.$('.bn').addClass("layui-btn-disabled").attr("disabled", true);
            $.ajax({
                url: '/etl/baseDb/test',
                type: 'post',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify(form.val("tableForm")),
                success: function (data, textStatus) {
                    layer.alert(data.data);
                    layui.$('.bn').removeClass("layui-btn-disabled").attr("disabled", false);
                },
                error: function (msg) {
                    layer.alert("失败！请重试.");
                    layui.$('.bn').removeClass("layui-btn-disabled").attr("disabled", false);
                }
            })
        });
    });

</script>

</html>